
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Create Class Hierarchies with <code>extend</code></title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Create Class Hierarchies with <code>extend</code></h1>

<div class="exampleIntro">
	<p>JavaScript supports the notion of class hierarchies.  As in other
object-oriented languages, you can create generic classes, then create
specialized subclasses that add or override functionality of the
superclass.</p>

<p>Click the "Show Inheritance" button to do some evaluation of the created object.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<pre style="margin-bottom: 1em">
var chicken = new Chicken();
</pre>
<input type="button" name="demo_btn" id="demo_btn" value="Show Inheritance"/>
<div id="demo">
</div>
<script type="text/javascript">

YUI({filter:"debug", logInclude: {"example":true}}).use("node", function(Y) {
    // This method is in the 'oop' module.  Since we require 'node'
    // for this example, and 'node' requires 'oop', the 'oop' module
    // will be loaded automatically.

    function Bird(name) {
        this.name = name;
    }

    Bird.prototype.flighted   = true;  // Default for all Birds
    Bird.prototype.isFlighted = function () { return this.flighted };
    Bird.prototype.getName    = function () { return this.name };

    function Chicken(name) {
        // Chain the constructors
        Chicken.superclass.constructor.call(this, name);
    }

    // Chickens are birds
    Y.extend(Chicken, Bird);
    
    // Define the Chicken prototype methods/members
    Chicken.prototype.flighted = false; // Override default for all Chickens

    function showInheritance() {
        var chicken = new Chicken('Little'),
            results = Y.one('#demo');

        results.append(((chicken instanceof Object) ?
            "<p>chicken IS an instance of Object.</p>" :
            "<p>chicken IS NOT an instance of Object.</p>"));

        results.append(((chicken instanceof Bird) ?
            "<p>chicken IS an instance of Y.example.Bird.</p>" :
            "<p>chicken IS NOT an instance of Y.example.Bird.</p>"));

        results.append(((chicken instanceof Chicken) ?
            "<p>chicken IS an instance of Y.example.Chicken.</p>" :
            "<p>chicken IS NOT an instance of Y.example.Chicken.</p>"));

        // Chicken instances inherit Bird methods and members
        results.append(((chicken.isFlighted()) ?
            "<p>chicken CAN fly.</p>" :
            "<p>chicken CAN NOT fly.</p>"));

        results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
    }
    
    Y.on('click', showInheritance, '#demo_btn');
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
